<template>
  <div
    class="panel-zone-bg reservoir-storage d-flex-c"
  >
    <div class="little-title">
      水库蓄水
    </div>
    <div class="flex-ai-c reservoir-storage-total">
      <div class="f-12 c-text-blue vertical-text m-h-mini">
        截至当前
      </div>
      <img
        :src="require('@/assets/images/ysqjcdp/blue-arrow.png')"
        class="blue-arrow m-l-tiny"
      >
      <img
        :src="require('@/assets/images/ysqjcdp/reservoir-storage-logo.png')"
        class="logo"
      >
      <div class="d-flex-c c-text-gray f-14">
        <span>
          <span class="reservoir-storage-horizontal-value">{{ handleDataShow(waterStorageInfo.lagerMiddleW) }}</span>
          亿m³
        </span>
        <span>总蓄水</span>
      </div>
    </div>
    <div class="d-flex-c flex-1">
      <div
        v-for="(item,index) in waterStorageList"
        :key="index"
        class="reservoir-storage-horizontal flex-between"
      >
        <div class="d-flex-c ai-c">
          <span class="f-14">
            <span class="reservoir-storage-horizontal-value">
              {{ handleDataShow(waterStorageInfo[item.key]) }}
            </span>
            亿m³
          </span>
          <span class="f-14">{{ item.label }}</span>
        </div>
        <div class="d-flex-c c-text-gray ai-c">
          <span class="f-14">
            <span class="reservoir-storage-horizontal-value">
              {{ handleDataShow(waterStorageInfo[item.cntqKey]) }}
            </span>
            亿m³
          </span>
          <div class="f-14">
            常年同期蓄水
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ReservoirOverview',
  data () {
    this.waterStorageList = [
      // {
      //   label: '大中型水库蓄水',
      //   key: 'lagerMiddleW',
      //   cntqKey: 'preLagerMiddleW'
      // },
      {
        label: '大型水库蓄水',
        key: 'lagerW',
        cntqKey: 'preLagerW'

      },
      {
        label: '中型水库蓄水',
        key: 'middleW',
        cntqKey: 'preMiddleW'
      }
    ]
    return {
      waterStorageInfo: {}

    }
  },
  mounted () {
    this.fecthWaterStorage()
  },
  methods: {
    async fecthWaterStorage () {
      const data = await this.$request.formDataPost(window.outApiHw + 'hw-api/outInterface/selectForecastPrecipitation')
      const total = this.waterStorageList.reduce((pre, cur) => {
        return pre + data[cur.key]
      }, 0)
      this.waterStorageInfo = {
        ...data,
        total
      }
    },
    handleDataShow (value) {
      return value ?? '-'
    }
  }
}
</script>

<style lang="scss" scoped>
.reservoir-storage {
  width: 232px;

  .reservoir-storage-total {
    background: linear-gradient(0deg, #003cb4 0%, rgba(0, 60, 180, 0) 100%) no-repeat left bottom;
    background-size: 100% 50px;
    width: 100%;
    height: 62px;
    margin-bottom: 8px;

    .blue-arrow {
      width: 6px;
      height: 49px;
    }

    .logo {
      width: 68px;
      height: 62px;
      margin-right: 22px;
    }
  }

  .reservoir-storage-horizontal {
    background: url("~@/assets/images/ysqjcdp/reservoir-storage.png") no-repeat left top;
    background-size: 100% 100%;
    width: 100%;
    // height: 56px;
    flex: 1;
    padding: 0 11px;

    &:not(:last-child) {
      margin-bottom: 4px;
    }
  }

  .reservoir-storage-horizontal-value {
    font-size: 20px;
    font-family: AGENCYR, serif;
    font-weight: 700;
    text-align: center;
    color: #00f6ff;
  }
}
</style>
